<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery自动触发事件</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>自动触发事件 trigger()：</p>
        <p>有些事件，希望自己触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器触发自动触发右侧按钮点击事件，不必鼠标点击触发。</p>
        <p>方式一：element.click();</p>
        <p>方式二：element.trigger('type');</p>
        <p>方式三：element.triggerHandler('type'); 这种方法不会触发元素的默认行为。</p>
    </div>
    <div class="box"></div>
    <input type="text">
    <script>
        $(function(){
            $('.box').on('click',function(){
                alert('自动触发点击');
            })
            //1、 元素.事件()
            // $('.box').click();
            //2、 元素.trigger('事件名');
            $('.box').trigger('click');

            $('input').on('focus',function(){
                $(this).val('触发了input的默认行为。')
            })
            //3、 元素.triggerHandler('事件名');
            //触发了input的默认行为。有光标在输入框内。
            $('input').trigger('focus');
            //没有触发 input的默认行为。没有光标在输入框内。
            // $('input').triggerHandler('focus');
        })
    </script>
</body>
</html>